<script>
import { getScrollWidth } from "@/utils/element"

export default {
	name: "Scroll",
	props: {
		width: {
			type: String,
			default: "100%",
		},
		height: {
			type: String,
			default: "100%",
		},
		x: {
			type: Boolean,
			default: true,
		},
		y: {
			type: Boolean,
			default: true,
		},
	},
	render(h) {
		return h(
			"div",
			{
				class: "scroll",
				style: {
					width: this.width,
					height: this.height,
				},
			},
			[
				h(
					"div",
					{
						class: "scroll-inner",
					},
					[this.$slots.default],
				),
			],
		)
	},
	created() {
		let scrollWidth = getScrollWidth()
		console.log(scrollWidth)
	},
}
</script>
<style lang="scss" scoped>
.scroll {
	overflow: hidden;

	> .scroll-inner {
		width: calc(100% + 17px);
		height: calc(100% + 17px);
		overflow: scroll;
	}
}
</style>
